<script setup>

import LightCard from "@/components/LightCard.vue";
import {onMounted, ref} from "vue";
import {Clock, CollectionTag, EditPen} from "@element-plus/icons-vue";
import TopicEditor from "@/components/TopicEditor.vue";
import {useStore} from "@/store/store.js";
import {get} from "@/net/index.js";
import axios from "axios";
import {useRouter} from "vue-router";


const editor = ref(false);
const store = useStore();
const router = useRouter();
const today = ref(getFormattedTime());
const topicList = ref([])
const end = ref(false)
const page = ref(0)
function getFormattedTime() {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  // const hour = String(now.getHours()).padStart(2, '0');
  // const minute = String(now.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

const updateList = () => {
  if (end.value) return;
  get(`/api/forum/listTopic?page=${page.value}&type=0`, (response) => {
    const data = response.data;
    if (data) {
      data.forEach(topic => topicList.value.push(topic));
      page.value++;
    }
    if(!data || data.length < 10) {
      end.value = true;
    }
  })
}

const  topicCreate =()=>{
  editor.value = false;
  page.value = 0;
  end.value = false;
  topicList.value = [];
  updateList();
}
// console.log(topicList.value)
onMounted(() => {
  setInterval(() => {
    today.value = getFormattedTime();
  }, 60000); // 每分钟更新一次
  updateList();
});
</script>

<template>
  <div style="display: flex; margin: 20px auto;gap: 20px;max-width: 1130px">
    <!--  左侧卡片视图  -->
    <div style="flex: 1">
      <light-card>
        <div class="create-topic" @click="editor=true">
          <el-icon>
            <EditPen/>
          </el-icon>
          点击新建主题...
        </div>

      </light-card>
      <light-card style="height: 30px"></light-card>
    <!-- 主题详情列表-->
   <div style="margin-top: 10px;display: flex;flex-direction: column;gap: 10px"  v-if="store.forum.types" >
      <light-card v-for="item in topicList" class="topic-card" @click="router.push(`/index/topic-detail/${item.id}`)">
        <div style="display: flex">
          <div>
            <el-avatar :src="`${axios.defaults.baseURL}/api/image/fetchImage?avatar=${item.avatar}`"/>
          </div>
          <div style="margin-left: 7px;transform: translateY(-2px)">
            <div style="font-size: 13px;font-weight: bold;">{{item.username}}</div>
            <div style="font-size: 12px;color: gray">
              <el-icon><Clock/></el-icon>
                <div style="margin-left: 2px;display: inline-block;transform:  translateY(-2px)">
                  {{ new Date(item.time).toLocaleString() }}
                </div>
            </div>
          </div>
        </div>
        <div>
          <div class="topic-type"
               :style="{
                  color: store.findTypeById(item.type)?.color+ 'EE',
                  'border-color': store.findTypeById(item.type)?.color+ '77',
                  'background': store.findTypeById(item.type)?.color+ '33',
            }">
            {{ store.findTypeById(item.type)?.name }}
          </div>
          <span style="font-weight: bold;margin-left: 5px">{{ item.title }}</span>
        </div>
        <div class="topic-content" >{{item.text}}</div>
      </light-card>
   </div>
    </div>
    <!--  右侧卡片列表  -->
    <div style="width: 300px">
      <div style="position:sticky; top: 20px">
        <!--  论坛公告-->
        <light-card>
          <div style="font-weight: bold">
            <el-icon>
              <CollectionTag/>
            </el-icon>
            <span>论坛公告</span>
          </div>
          <el-divider style="margin: 10px 0"/>
          <div style="font-size: 14px;color: grey">
            亲爱的的论坛成员，<br/>
            感谢您选择加入我们的社区。我们很高兴与您分享最新的论坛动态和重要信息。<br/>
            感谢您对论坛的支持与关注，让我们共同努力，打造一个友好、安全、有价值的交流平台。<br/>
            祝您使用愉快！<br/>
            日期：[2024-05-11]
          </div>
        </light-card>
        <light-card style="display: flex;justify-content: space-between;color: gray;font-size: 14px">
          <div>当前时间：</div>
          <div>{{ today }}</div>
        </light-card>
      </div>
    </div>
    <!--  富文本编辑器  -->
    <topic-editor :show="editor" @success="topicCreate()" @close="editor = false"/>
  </div>
</template>

<style scoped lang="less">
.topic-card {
  padding: 15px;
  transition: scale 0.3s;

  &:hover {
    scale: 1.017;
    cursor: pointer;
  }

  .topic-type {
    display: inline-block;
    border: solid 0.5px gray;
    border-radius: 5px;
    font-size: 12px;
    padding: 0 5px;
  }

  .topic-content {
    font-size: 14px;
    color: gray;
    margin: 5px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topic-image {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    max-height: 110px;
  }

}

.friend-link {
  border-radius: 5px;
  overflow: hidden;
}

.create-topic {
  background-color: #efefef;
  border-radius: 5px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  padding: 0 10px;
  margin: 10px;
  color: gray;

  &:hover {
    cursor: pointer;
  }
}

.dark .create-topic {
  background-color: #232323;
}
</style>